﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #container {
            width:730px;
        }
            #container > div {
                width:240px;
                height:240px;
                border:1px solid #ccc;
                float:left;

            }
    </style>
    <script src="scripts/jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {

                var ratLocation = 0;
                var score = 0;
                function showRat() {
                    clearRat();
                    ratLocation = parseInt(Math.random() * 9) + 1;
                    $("#box" + ratLocation).html('<img  src="rat.jpg"/>');
                    setTimeout(showRat, 1000);
                }
                function clearRat() {
                    $("#box" + ratLocation).empty();
                }
                $("#container>div").click(function () {
                    var cliackebox = "box" + ratLocation;
                    if ($(this).attr("id") == cliackebox) {
                        score += 100;
                        $("#score").html(score + "分")
                    }

                })
                showRat();
                
                   

            });
    </script>
</head>
<body>
    <div id="container">
        <h1 id="score">0分</h1>
        <div id="box1">
            
        </div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
        <div id="box7"></div>
        <div id="box8"></div>
        <div id="box9"></div>
    </div>
</body>
</html>
